//	items:内容，格式为{}
//	container:节点ID
//	defaultValue: 初始值
//	width: 下拉菜单高度
//	onCommand:选择后的返回函数

$.menu = $.Class();
$.extend($.menu.prototype, {
	options: {
		items: null,
		container: "",
		onCommand: null
	},

	sos: function (os) {
		$.extend($.extend(this, this.options), os);
	},

	initialize: function (options) {
		this.sos(options);
		this.iD();
		this.iE();
	},

	iD: function () {
		this.value = this.defaultValue;
		this.items = this.items || {};
		this.container = $("#" + this.container);
		this.render();
	},

	iE: function () {
		this.header.click(function () { this.body.toggle(1000); } .proxy(this));
		this.region.find("dd ul li a").click(function (e) {
			var clicked = $(e.target);
			this.header.html(clicked.html());
			this.body.hide();
			this.value = clicked.find("span.value").html();
			this.onCommand && this.onCommand(this.value);
		} .proxy(this));

		this.oWCH = this.onWindowClick.proxy(this);
		$(document).bind('click', this.oWCH);
	},

	dD: function () {
		this.body = null;
		this.header = null;
		this.container = null;
	},

	dE: function () {
		$(document).unbind('click', this.oWCH);
	},

	close: function () {
		this.dE();
		this.dD();
	},
	onWindowClick: function (e) {
		var clicked = $(e.target);
		if (!clicked.parents().filter(this.container).length) {
			this.body.hide();
		}

	},
	//构建选项
	render: function () {
		var n = this.items[this.value] || "无选项";
		var v = this.value || "";
		this.region = $('<dl class="dropdown"></dl>');
		this.container.append(this.region);
		this.region.append('<dt><a href="#">' + n + '<span class="value">' + v + '</span></a></dt>');
		this.region.append('<dd><ul></ul></dd>');
		this.body = this.region.find("dd ul").css({ width: this.width });
		this.header = this.region.find("dt a");
		$.each(this.items, function (value, name) {
			this.body.append('<li><a href="#">' + name + '<span class="value">' + value + '</span></a></li>');
		} .proxy(this));
	},
	//获取选项值
	getValue: function () {
		return this.value;
	},
	//返回默认选项
	resetValue: function () {
		this.setValue(this.defaultValue);
	},
	//设定选项值
	setValue: function (value) {
		var n = this.items[value] || "无选项";
		var v = value || "";
		this.header.html(n + '<span class="value">' + v + '</span>');
		this.value = value;
	}
});

//	items:内容，格式为{}
//	container:节点ID
//	defaultValue: 初始值
//	width: 下拉菜单高度
//	onCommand:选择后的返回函数

$.box = $.Class();
$.extend($.box.prototype, {
	options: {
		content: null,
		button: "",
		onClick:null,
		onBlur:null
	},

	sos: function (os) {
		$.extend($.extend(this, this.options), os);
	},

	initialize: function (options) {
		this.sos(options);
		this.iD();
		this.iE();
	},

	iD: function () {
		this.button = $("#" + this.button);
		this.parent = this.button.parent();
		this.render();
	},

	iE: function () {
		this.oBCH = this.onButtonClick.proxy(this);
		this.button.bind('click', this.oBCH);
		this.oWCH = this.onWindowClick.proxy(this);
		$(document).bind('click', this.oWCH);
	},

	dD: function () {
		this.region = null;
		this.button = null;
	},

	dE: function () {
		this.button.unbind('click', this.oBCH);
		$(document).unbind('click', this.oWCH);
	},

	closed: function () {
		this.dE();
		this.dD();
	},
	onButtonClick: function (e) {
		e.preventDefault();
		e.stopPropagation();
		this.onClick && this.onClick();
		
	},
	onWindowClick: function (e) {
		if (this.region.css("display") === "block") {
			var clicked = $(e.target);
			if (!clicked.parents().filter(this.parent).length) {
				this.onBlur && this.onBlur();
			}
		}
	},
	//构建选项
	render: function () {
		this.region = $(this.content);
		this.button.after(this.region);
	}
});

$.panel = $.Class();
$.extend($.panel.prototype, {
	options: {
		title:"",
		content: "",
		container:$(document.body)
	},

	sos: function (os) {
		$.extend($.extend(this, this.options), os);
	},

	initialize: function (options) {
		this.sos(options);
		this.iD();
		this.iE();
	},

	iD: function () {
		this.render();
	},

	iE: function () {
//		this.oBCH = this.onButtonClick.proxy(this);
//		this.button.bind('click', this.oBCH);
//		this.oWCH = this.onWindowClick.proxy(this);
//		$(document).bind('click', this.oWCH);
	},

	dD: function () {
		this.region = null;
		this.button = null;
	},

	dE: function () {
		//this.button.unbind('click', this.oBCH);
		//$(document).unbind('click', this.oWCH);
	},

	closed: function () {
		this.dE();
		this.dD();
	},
	onMiniC: function (e) {
		e.preventDefault();
		e.stopPropagation();
		this.onClick && this.onClick();
		
	},
	onC: function (e) {
		e.preventDefault();
		e.stopPropagation();
		this.onClick && this.onClick();
		
	},
	onButtonClick: function (e) {
		e.preventDefault();
		e.stopPropagation();
		this.onClick && this.onClick();
		
	},
	//构建选项
	render: function () {
		var html = '<div class="container">\
						<div class="panel">\
							<div class="panel-header"><span>'+this.title+'</span><a class="panel-header-button">X</a><a class="panel-header-button">[]</a><a class="panel-header-button">-</a></div>\
							<div class="panel-content">'+this.content+'</div>\
						</div>\
					</div>';
		this.region = $(html);
	}
});